<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="box">
        <button onclick="show()">添加商品</button>
        <input type="text" class="mc">
        <button onclick="ss()">搜索</button>
        <input type="text" placeholder="请输入最低价格" class="min">
        <input type="text" placeholder="请输入最高价格" class="max">
        <button onclick="qjcx()">根据区间搜索</button>
        <button onclick="px()">按照价格排序</button>
        <button>批量删除</button>
        <button onclick="ghbs()" class="bs">开启隔行变色</button>
        <button onclick="yrbs()" class="yr">开启移入变色</button>
        <div class="mtk">
            商品名称: <input type="text" class="shopname"><br><br>
            商品数量: <input type="text" class="num"><br><br>
            商品单价: <input type="text" class="price"><br><br>
            商品种类: <select>
                <option>食品</option>
                <option>电子设备</option>
                <option>玩具</option>
                <option>衣服</option>
            </select><br><br>
            验证码: <input type="text" class="yzm">
            <button onclick="getNum()">获取验证码</button><span></span><br><br>
            <button onclick="add()">添加</button>
            <button onclick="no()">关闭</button>
        </div>
        <div class="zzc"></div>
        <table border="1" width="100%" cellspacing="0">
            <thead>
                <tr>
                    <th><input type="checkbox"></th>
                    <th>编号</th>
                    <th>商品名称</th>
                    <th>种类</th>
                    <th>数量</th>
                    <th>单价</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
            <tfoot>
                <tr>
                    <td colspan="8">商品总数为<font></font> 商品总价为<span class="zj"></span></td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>

</html>
<script>
    var tbody = document.querySelector('tbody')
    var mtk = document.querySelector('.mtk')
    var zzc = document.querySelector('.zzc')
    var mc = document.querySelector('.mc')
    var min = document.querySelector('.min')
    var max = document.querySelector('.max')
    var shopname = document.querySelector('.shopname')
    var num = document.querySelector('.num')
    var price = document.querySelector('.price')
    var select = document.querySelector('select')
    var yzm = document.querySelector('.yzm')
    var span = document.querySelector('span')
    var zs=document.querySelector('font')
    var zj=document.querySelector('.zj')
    var bs=document.querySelector('.bs')
    var yr=document.querySelector('.yr')
    function show() {
        mtk.style.display = 'block'
        zzc.style.display = 'block'
    }
    function no() {
        mtk.style.display = 'none'
        zzc.style.display = 'none'
        shopname.value = ''
        num.value = ''
        price.value = ''
        select.value = ''
        yzm.value = ''
    }
    function set(arr) {
        localStorage.setItem('data', JSON.stringify(arr))
    }
    function get() {
        var a = localStorage.getItem('data')
        if (a != null) {
            return JSON.parse(a)
        } else {
            return []
        }
    }
    function getNum() {
        var a = Math.floor(Math.random() * (9999 - 1000) + 1000)
        span.innerHTML = a
    }
    function add() {
        if (yzm.value.trim() != span.innerHTML) {
            alert('验证码错误')
        } else {
            //先获取数据
            var shuju = get()
            //操作数据(添加)
            shuju.push({
                mz: shopname.value,
                sl: num.value,
                dj: price.value,
                zl: select.value
            })
            //存储
            set(shuju)
            no()
            //渲染
            xr()
        }
    }

    function xr(arr) {
        tbody.innerHTML = ''
        //获取数据
        var shuju = arr?arr:get()
        var a=0;
        var b=0;
        //for循环遍历
        for (i = 0; i < shuju.length; i++) {
            //1、创建
            var tr = document.createElement('tr')
            //2、赋值
            tr.innerHTML = `
                    <td><input type="checkbox"></td>
                    <td>${i + 1}</td>
                    <td>${shuju[i].mz}</td>
                    <td>${shuju[i].zl}</td>
                    <td>${shuju[i].sl}</td>
                    <td>${(shuju[i].dj / 1).toFixed(2)}</td>
                    <td>${(shuju[i].sl * shuju[i].dj / 1).toFixed(2)}</td>
                    <td><button ${i==0?'disabled':''} onclick="sy(${i})">上移</button><button ${i==shuju.length-1?'disabled':''} onclick="xy(${i})">下移</button><button onclick="del(${i})">删除</button></td>
            `;
            //3、添加
            tbody.appendChild(tr)
            a+=shuju[i].sl/1
            b+=shuju[i].sl*shuju[i].dj
        }
        zs.innerHTML=a
        zj.innerHTML=(b/1).toFixed(2)
    }
    function ss(){
        //获取数据
        var shuju=get()
        //筛选
        var newArr=shuju.filter(function(ele,i){
            return ele.mz==mc.value
        })
        xr(newArr)
    }
    function qjcx(){
        //获取数据
        var shuju=get()
        //筛选
        var newArr=shuju.filter(function(ele,i){
            return ele.dj/1>=min.value&&ele.dj/1<=max.value
        })
        xr(newArr)
    }
    function px(){
        //获取数据
        var shuju=get()
        //筛选
        var newArr=shuju.sort(function(a,b){
            return a.dj-b.dj
        })
            
        
        xr(newArr)
    }
    function ghbs(){
        if(bs.innerHTML=='开启隔行变色'){
            bs.innerHTML='关闭隔行变色'
            tbody.className='ghbs'
        }else{
            bs.innerHTML='开启隔行变色'
            tbody.className=''
        }
    }
    function yrbs(){
        if(yr.innerHTML=='开启移入变色'){
            yr.innerHTML='关闭移入变色'
            tbody.className='yrbs'
        }else{
            yr.innerHTML='开启移入变色'
            tbody.className=''
        }
    }
    function sy(index){
        var shuju=get()
        var b=shuju[index]
        shuju[index]=shuju[index-1]
        shuju[index-1]=b
        set(shuju)
        xr()
    }
    function xy(index){
        var shuju=get()
        var b=shuju[index]
        shuju[index]=shuju[index+1]
        shuju[index+1]=b
        set(shuju)
        xr()
    }
    function del(aaa){
        var shuju=get()
        shuju.splice(aaa,1)
        set(shuju)
        xr()
    }
    xr()
</script>